import { h } from 'preact';
import '../../storybook-utilities/designSystem.scss';
import { Meta } from '@storybook/addon-docs';

<Meta title="Writing CSS" />

# Writing CSS

If you ever end up writing your own CSS, it's worth to know several things.

### Mobile first approach

We try to write frontend code for mobile and then use media queries for bigger
breakpoints. You can read more about it in Responsiveness section.

### SCSS

We use SCSS as a CSS preprocessor. So you can use all the magic that SCSS
offers.

### CSS Variables

Even though we use SCSS, we prefer to use native CSS variables because they are
more flexible. You should be able to view all variables we have in
`app/assets/stylesheets/config/_variables.scss` file. Since this file is
imported everywhere, you should not need to import that by your own.

Fun fact: there's one exception to that: responsiveness breakpoints. Since you
can't use a CSS variables when defining a media query, this is the only case
when we use SCSS variables. It's just easier.

### Themes

Forem support two themes so you should always test your work against both.

- Default theme: `app/assets/stylesheets/config/_colors.css`

- Dark theme: `app/assets/stylesheets/themes/dark.css`

### Import.scss

When you create a new SCSS file you may want to import one file at the top of
your new file: `app/assets/stylesheets/config/_import.scss` - it contains some
helpers as well as breakpoint variables I mentioned earlier.

### Folders

You can access all of the SCSS files in `app/assets/stylesheets` folder.

| Folder/File               | Description                                                       |
| ------------------------- | ----------------------------------------------------------------- |
| `/base`                   | Contains some fundamental styling for layouts, resets and icons.  |
| `/components`             | Contains separate SCSS file for each component.                   |
| —                         | —                                                                 |
| `/config`                 | Contains many configuration files.                                |
| `/config/_colors.scss`    | Contains all color variables.                                     |
| `/config/_generator.scss` | Contains SCSS mixins generating _all_ of our utility classes.     |
| `/config/_import.scss`    | Contains helpers for SCSS as well as media breakpoints variables. |
| `/config/_variables.scss` | Contains all CSS native variables.                                |

There are other folders and top level files that we use, but they might be deprecated in the future. They are:

- `crayons.scss` - this is one importing everything Crayons-related like
  variables, components styling, utility classes etc.
- `views.scss` - this one contains views-specific styling. It is separated
  from Crayons to make Crayons library DEV agnostic.
- `minimal.scss` - this one is actually one of the main stylesheets from
  pre-Crayons era. It imports everything basically :).
